<!-- FileUpload.vue -->
<template>
  <div style="text-align: center">
    <el-upload
      class="upload-demo"
      :action="uploadApiUrl"
      :data="extraParams"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :file-list="fileList"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <el-image :src="dialogImageUrl" fit="contain" />
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  props: {
    uploadApiUrl: String, // 上传接口的URL
    extraParams: Object,

    url: String
  },
  data() {
    return {
      imageName: '', // 用于显示图片名称的输入框的值
      uploading: false, // 标志位，表示是否正在上传
      fileList: [],

      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {},
  mounted() {
    console.log('url', this.url)
    console.log('extraParams', this.extraParams)
    if (this.url && this.url.trim() !== '') {
      this.fileList = this.url.split(',').map((filename) => ({
        name: filename,
        url: `http://49.232.236.127/wzimg/${filename}` // 替换成你的图片服务器的基础 URL
      }))
    }
    console.log('fileList', this.fileList)
  },
  updated() {
    // console.log("Component updated");
  },
  methods: {
    handleRemove(file, fileList) {
      // console.log("调用了删除");
      // console.log('....',file.name);
      // console.log(this.fileList);
      // 通过文件的 name 属性查找对应的图片数据
      const index = this.fileList.findIndex((item) => item.name === file.name)
      if (index !== -1) {
        // this.urls.splice(index, 1);
        this.fileList.splice(index, 1)

        // 发送删除事件给父组件
        this.$emit('delete-image', {
          dcblx: this.extraParams.dcblx,
          fileName: file.name
        })

        console.log(`图片 ${file.name} 删除成功`)
      } else {
        console.error(`未找到要删除的图片 ${file.name}`)
      }
    },

    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑

      console.log('文件上传成功:', response, file, fileList)
      if (response.code == -1) {
        Message({
          message: '图片可能重复',
          type: 'error',
          duration: 3000
        })
        const index = fileList.findIndex((item) => item.name === file.name)
        if (index !== -1) {
          fileList.splice(index, 1)
        }
        return
      }
      console.log('444444')
      this.fileList.push({
        name: response.data.newFileName,
        url: `http://49.232.236.127/wzimg/${response.data.newFileName}` // 假设服务器返回的数据中有图片的url
      })
      this.$emit('upload-success', {
        dcblx: this.extraParams.dcblx,
        fileName: response.data.newFileName
      })
      Message({
        message: '图片上传成功',
        type: 'info',
        duration: 3000
      })
    },

    getImageUrl(hashfile) {
      // console.log("我人麻了", hashfile, this.urls);
      console.log('fileList', this.fileList)
      // 这里假设图片的路径是相对路径
      // 实际情况可能需要根据你的后端返回的数据进行调整
      // this.imageName = hashfile;
      return `http://49.232.236.127/wzimg/${hashfile}`
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style>
.el-input.is-disabled .el-input__inner {
  background-color: white;
}

.upload-demo {
  margin: 10px;
}

.image-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.uploaded-image {
  position: relative;
  margin-right: 10px;
  cursor: pointer;
}

.image-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.el-upload-list__item {
  width: 25%;
  float: left;
}
</style>
